<template>
  <a class="del-btn" @click="$emit('click')" @mousedown="$emit('mousedown', $event)" :style="{top:btnY+'px'}"><DelIco class="del-ico"/></a>
</template>

<script>
import DelIco from '@/view/ico/close'
export default {
  components: {
    DelIco
  },
  props: {
    d: Object
  },
  data () {
    return {
      btnY: -24
    }
  },
  mounted () {
    this.setBtnX(this.d.y)
  },
  methods: {
    onMoveChange () {
      this.setBtnX(this.d.y)
    },
    // 防止按钮隐藏
    setBtnX (y) {
      this.btnY = -24
      if (y < 24) this.btnY = -y
    }
  }
}
</script>

<style scoped>
.del-btn {
  position: absolute;
  right: 4px;
  top: -24px;
  width: 20px;
  height: 20px;
  background-color: #f00;
  padding: 2px;

  background-size: 71%;
  cursor: pointer;
  box-sizing: content-box;
}
.del-ico {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  color: #fff;
  position: absolute;

}
</style>
